<template>
  <div>
    <ex-dialog
      width="40%"
      class="ex-diolog"
      title="填写处理结果"
      :visible="visible"
      @closeDialog="handleClose"
    >
      <div class="main">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="" class="el-label" prop="result">
            <el-input
              v-model.trim="form.result"
              type="textarea"
              maxlength="100"
              :autosize="{ minRows: 3 }"
              placeholder="请输入处理意见"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="botBox">
        <el-button @click="hidedialog('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="buttonLoading">确认</el-button>
      </div>
    </ex-dialog>
  </div>
</template>
<script>
// components
import Loading from '@/components/Loading/index' 
// api
import {
  fillDeal,
} from '@/api/warningComplaint'

export default {
  components: {

  },
  props: {
    visible: Boolean,
    id: String,
    path: String,
  },
  data() {
    return {
      buttonLoading: false,
      form:{
        warningId: '',
        result: '',
      },
      rules: {
        result: [
          { required: true, message: '请输入处理意见', trigger: 'blur' },
          { min: 0, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
  
  },
  created() {
    this.form.warningId = this.id
    console.log('visible',this.visible)
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.$emit('update:visible', false)
    },
    //确认
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          var data = {
            ...this.form
          }
          fillDeal(data).then((res) => {
            this.handleSuccess("处理成功")
            setTimeout(() => {
              this.buttonLoading = false
            }, 800);
          }).finally(() => {
            setTimeout(() => {
              this.buttonLoading = false
            }, 800);
          });
          // this.rejectClick()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1000,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
    //取消
    hidedialog(formName){
      this.handleClose()
      this.$refs[formName].resetFields();
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }

}
.botBox{
  display: flex;
  justify-content: center;
}
</style>
